<template>
  <div>
    <mt-header fixed  title="详情">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      ref="loadmore"
      style="margin-top: 40px;"
    >
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <li
          v-for="(item, index) in photosList"
          v-bind:key="index"
        ><img @click="details()" :src="item.images.small" alt:="item.alt">
          <div style="padding: 14px;">
            <span>{{ item.title }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ item.year }}</time>
              <div type="text" class="button">{{ item.directors[0].name }}</div>
            </div>
          </div>
        </li>
      </ul>
    </mt-loadmore>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
import { Toast, Indicator, MessageBox } from 'mint-ui'
export default {
  data() {
    return {
      allLoaded: true,
      photosList: [],
      loading: false
    }
  },
  components: { HelloWorld },
  created() {
    // this.getPhotos()
    console.log('页面传递的参数====', this.$route.query.testId, this.$route.params.testId)
    Indicator.open()
    this.getMovies()
  },
  methods: {
    async getMovies() {
      try {
        const params = {
          start: 0,
          count: 10
        }
        const res = await this.$api.douban.movieList(params)
        this.photosList = res.subjects
        console.log(this.photosList)
        Indicator.close()
      } catch (e) {
        console.log(e)
      }
    },
    details() {
      MessageBox('Notice', 'You clicked the button').then(action => {
        Toast('测试一下')
      })
    },
    back() {
      this.$router.push({ path: '/' })
    },
    loadTop() {
      console.log('loadTop')
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded()
      }, 2000)
    },
    loadBottom() {
      console.log('loadBottom')
    },
    loadMore() {
      if (!this.loading) {
        console.log('loadMore', this.loading)
        this.loading = true
        console.log('loadMore', this.loading)
        setTimeout(() => {
          this.photosList.push(this.photosList[0])
          this.loading = false
        }, 2000)
      }
    }
  }
}
</script>
<style scoped>
ul {
  list-style: none;
  padding-left: 0px;
}
</style>

